import React, { PureComponent } from 'react'
import { View, StyleSheet, Text } from 'react-native'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import PropTypes from 'prop-types'
import CustomImage from 'src/components/image/CustomImage'
import CustomButton from 'src/components/button/CustomButton'
import LinearGradient from 'react-native-linear-gradient'

export default class CollectionMsg extends PureComponent {
    onCollectedClick = () => {
        const { isCollected, onCollected } = this.props
        onCollected(isCollected)
    }
    render() {
        const { isCollected } = this.props
        return (
            <CustomButton
                style={[styles.naviBtnBG]}
                onPress={this.onCollectedClick}
            >
                {isCollected == 1 ? (<CustomImage source={require('src/imgC/live/haveGiveLike.png')} />) : (
                    <CustomImage source={require('src/imgC/live/giveLike.png')} />
                )}
            </CustomButton>
        )
    }
}
CollectionMsg.propTypes = {
    isCollected: PropTypes.number,
    onCollected: PropTypes.func.isRequired
}
CollectionMsg.defaultProps = {
    isCollected: false
}

const styles = StyleSheet.create({
    naviBtnBG: {
        // marginHorizontal: ScaleS(2),
        // width: ScaleS(44),
        // height: ScaleS(28),
        // backgroundColor: '#F5F5F5',
        // borderRadius: ScaleS(14),
        // justifyContent: 'center',
        // alignItems: 'center'
    },
    naviBtnLinearGradient: {
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: ScaleS(14)
    }
})
